<template>
  <d2-container>
    <div class="flex-1">
      <div class="flex-1 ml-2">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="会员任务列表" name="first">
            <el-table :data="taskstepList" border stripe>
              <el-table-column align="center" label="序号" type="index" width="45" />
              <el-table-column align="center" label="任务图标" prop="image" width="80">
                <template slot-scope="scope">
                  <el-popover placement="right" trigger="hover" v-if="scope.row.task_icon_image">
                    <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.task_icon_image"
                      fit="cover" />
                    <el-image style="width: 220px; height: 220px" :src="scope.row.task_icon_image" fit="cover" />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="任务名称" prop="task_title" width="180" />
              <el-table-column align="center" label="审核状态" prop="belong" width="70">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.review_status == 0" type="success">审核中</el-tag>
                  <el-tag v-if="scope.row.review_status == 1" type="success">已通过</el-tag>
                  <el-tag v-if="scope.row.review_status == 2" type="success">未通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="提交时间" prop="create_time" width="110" />
              <el-table-column align="center" label="操作" width="260">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleDetail(scope.row.id)">提交详情</el-button>
                  <el-button size="mini" type="success" v-if="scope.row.review_status == 0" @click="passThrough(scope.row.id)">通过</el-button>
                  <el-button size="mini" type="warning" v-if="scope.row.review_status == 0" @click="noPass(scope.row.id)">不通过</el-button>
                  <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog :visible.sync="dialogDetailVisible" width="65%" title="提交详情">
        <div class="flex-1 mx-3 mt-2">
          <div class="flex-1 row-ac font-s-2">
            <div class="text-muted mr-2">任务名称:</div>
            <div>{{ taskstepInfo.task_title }}</div>
          </div>
          <div class="flex-1 d-f font-s-2 mt-3">
            <div class="text-muted mr-2">任务图标:</div>
            <div class="icon-img">
              <img :src="taskstepInfo.task_icon_image" alt="" />
            </div>
          </div>
          <div class="flex-1 row-ac font-s-2 mt-3">
            <div class="text-muted mr-2">审核状态:</div>
            <div class="text-danger">{{ taskstepInfo.review_status | statusFilter }}</div>
          </div>
          <div class="flex-1 row-ac font-s-2 mt-3">
            <div class="text-muted mr-2">提交时间:</div>
            <div>{{ taskstepInfo.create_time}}</div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDetailVisible = false">关 闭</el-button>
        </div>
        <div class="flex-1 mt-3">
          <div class="flex-1 mb-2" v-for="(item,index) in taskstepInfo.task_step" :key="index">
            <div class="flex-1" style="line-height: 1.8;"><text
                class="">{{ index + 1 }}</text>{{ item.des }}
            </div>
            <div class="flex-1 mt-2 row-ac">
              <div v-if="!item.text_Input">
                <div class="sample-image" v-if="item.sample_image">
                  <img :src="item.sample_image"></img>
                </div>
              </div>
              <div class="row-a-j-fc flex-1">
                <div class="sample-image" v-if="item.user_image !== ''">
                  <img  :src="item.user_image"></img>
                </div>
                <div class="text-input" v-if="item.text_Input">
                    <div class="">{{ item.text_content }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {
    taskstepDeleteUrl,
    taskstepUpdateUrl,
    taskstepCreateUrl,
    taskstepDetailUrl,
    taskstepPatchUrl,
    taskstepListUrl,
  } from '@/utils/task'
  export default {
    data() {
      return {
        dialogDetailVisible: false,
        activeName: 'first',
        taskstepList: [],
        queryInfo: {
          review_status: ''
        },
        taskstepInfo: ''
      }
    },
    created() {
      this.initData()
    },
    filters: {
      statusFilter(val) {
        if (val == 0) {
          return '审核中'
        } else if (val == 1) {
          return '已通过'
        } else if (val == 2) {
          return '未通过'
        }
      }
    },
    methods: {
      initData() {
        this.getTaskstepList()
      },
      getTaskstepList() {
        this.$get(taskstepListUrl, this.queryInfo).then(res => {
          this.taskstepList = res.data.data.list
          this.total = res.data.data.total
        })
      },
      handleClick() {

      },
      handleDetail(taskstepId) {
        this.dialogDetailVisible = true
        this.$get(taskstepDetailUrl + taskstepId + '/').then(res => {
          this.taskstepInfo = res.data.data
        })
      },
      passThrough(taskstepId) {
        this.$confirm('此操作将通过审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.queryInfo.review_status = 1
          this.$patch(taskstepPatchUrl + taskstepId + '/', this.queryInfo).then(res=>{
            if(res.data.code == 200){
              this.$message.success('审核通过')
              this.getTaskstepList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      noPass(taskstepId) {
        this.$confirm('此操作将不通过审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.queryInfo.review_status = 2
          this.$patch(taskstepPatchUrl + taskstepId + '/', this.queryInfo).then(res=>{
            if(res.data.code == 200){
              this.$message.success('审核不通过')
              this.getTaskstepList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      openDelete(taskstepId) {

      }
    }
  }
</script>
<style lang="scss">
  .icon-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .num-box {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: inline-flex;
    background-color: red;
	}
</style>
